<template>
  <div>

    <div class="container">
      <div class="handle-box">
        <el-input v-model="query.orderId" clearable placeholder="订单号" style="width: 200px;" class="handle-input mr10"></el-input>
        <el-select v-model="query.paymentStatus" clearable placeholder="支付状态" style="width: 200px;" class="handle-input mr10">
          <el-option label="全部" value=""></el-option>
          <el-option label="已支付" :value="1"></el-option>
          <el-option label="未支付" :value="0"></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>

      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        v-loading="tableLoading"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
        :row-key="getRowKey"
        :default-sort="{prop: 'orderId', order: 'descending'}"
      >
        <el-table-column prop="orderId" label="订单号"></el-table-column>
        <el-table-column prop="participants.fullName" label="用户姓名"></el-table-column>
        <el-table-column prop="participants.taxIdNumber" label="税号"></el-table-column>
        <el-table-column prop="paymentStatus" label="支付状态">
          <template #default="{ row }">
            <span :style="{ color: row.paymentStatus === 1 ? 'red' : '' }">
              {{ row.paymentStatus === 1 ? '已支付' : '未支付' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="orderAmount" label="缴费金额"></el-table-column>
        <el-table-column prop="paymentTime" label="支付时间" :formatter="formatDateTime"></el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="query.pageIndex"
          :page-sizes="[5, 10, 20, 30, 50]"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>


  </div>
</template>

<script>
import requests from '../utils/request'

export default {
    name: 'basetable',
    data() {
      return {
        query: {
            orderId: '',
            paymentStatus: '',
            pageIndex: 1,
            pageSize: 30
        },
        tableData: [],
        pageTotal: 0,
        idx: -1,
        id: -1,
        tableLoading: false,
        dataCache: new Map(), // 数据缓存
      };
    },
    created() {
       this.loading()
    },
    methods: {
      //加载数据
      loading() {
        // 检查缓存
        const cacheKey = this.getCacheKey();
        if (this.dataCache.has(cacheKey)) {
          const cachedData = this.dataCache.get(cacheKey);
          this.tableData = cachedData.data;
          this.pageTotal = cachedData.total;
          return Promise.resolve(cachedData);
        }

        this.tableLoading = true;
        
        // 构建请求参数，过滤空值
        const params = {
          page: this.query.pageIndex,
          size: this.query.pageSize
        };
        
        if (this.query.orderId) {
          params.orderId = this.query.orderId;
        }
        
        if (this.query.paymentStatus !== '') {
          params.paymentStatus = this.query.paymentStatus;
        }
        
        return requests.get("/orders/pageSelect", params).then(res => {
          this.pageTotal = res.total;
          this.tableData = res.data;
          
          // 缓存数据
          this.dataCache.set(cacheKey, {
            data: res.data,
            total: res.total,
            timestamp: Date.now()
          });
          
          // 清理过期缓存（超过5分钟）
          this.cleanExpiredCache();
          
          this.tableLoading = false;
          return res;
        }).catch(err => {
          this.tableLoading = false;
          if (err.response) {
            this.$message.error(err.response.data);
          } else {
            this.$message.error("请求失败");
          }
          throw err;
        });
      },
      // 触发搜索按钮
      handleSearch() {
          this.query.pageIndex = 1;
          this.loading();
      },
      handlePageChange(val) {
        this.query.pageIndex = val
        this.loading()
      },
      // 每页条数改变
      handleSizeChange(val) {
          this.query.pageSize = val
          this.loading()
      },
      //时间格式化
      formatDateTime(row, column, cellValue) {
        if (!cellValue) return '';
        const date = new Date(cellValue);
        const pad = n => n.toString().padStart(2, '0');
        return `${date.getFullYear()}/${pad(date.getMonth() + 1)}/${pad(date.getDate())} ` +
               `${pad(date.getHours())}:${pad(date.getMinutes())}`;
      },
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
